import React, { ReactElement, useContext } from 'react';
import { Text, View } from 'react-native';

import Button from '../../../../../../components/Button';
import { setShowRecord } from '../../actions';
import { Store } from '../../reducer';
import styles from './style';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { isVod, unReadNumber, assistantInfo, showRecord } = state;
  const { name } = assistantInfo;
  if (showRecord) return <View />;
  if (isVod) {
    return (
      <Button
        text="查看聊天记录"
        textStyle={styles.desc}
        style={styles.contact}
        onPress={(): void => {
          setShowRecord(true);
        }}
      />
    );
  }
  return (
    <Button
      style={styles.contact}
      onPress={(): void => {
        setShowRecord(true);
      }}
    >
      {unReadNumber > 0 ? (
        <Text style={styles.desc}>
          未读<Text style={styles.special}>{`(${unReadNumber})`}</Text>
        </Text>
      ) : (
        <Text style={styles.desc}>我有疑问，找{name}</Text>
      )}
    </Button>
  );
};
